<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>前端拖拽</title>
    <style>
      body {
        margin: 10px;
      }

      #ai {
        position: absolute;
        width: 500px;
        height: 400px;
        border: 2px solid #92cccc;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000px;
      }
    </style>
  </head>
  <body>
    <div id="ai"></div>
    <script>
      function dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) {
          var ev = event || window.event;
          event.stopPropagation();
          var disX = ev.clientX - Drag.offsetLeft;
          var disY = ev.clientY - Drag.offsetTop;
          document.onmousemove = function(event) {
            var ev = event || window.event;
            Drag.style.left = ev.clientX - disX + "px";
            Drag.style.top = ev.clientY - disY + "px";
            Drag.style.cursor = "move";
          };
        };
        Drag.onmouseup = function() {
          document.onmousemove = null;
          this.style.cursor = "default";
        };
      }
      dragFunc("ai");
    </script>
  </body>
</html>
